iT邦幫忙

2021 iThome 鐵人賽

DAY 5
0
Mobile Development

如何開發適合電子書閱讀器使用的瀏覽器 Android APP系列 第 5

電子書閱讀器上的瀏覽器 [Day05] 提高圖案對比度

  • 分享至 

  • xImage
  •  

從下面截圖可以看得出來,原本的畫面設計大部分按鈕圖案是灰色的,有些地方的文字也是非全黑的顏色。這在一般螢幕上可以避免過黑,跟白色背景造成太強烈的對比。但是在電子紙的呈現上,我們反而希望圖案就是全黑的,這樣子在辨識度上可以更高,也不會讓畫面有看起來糊糊的感覺。

https://ithelp.ithome.com.tw/upload/images/20210902/20140260vIJJyUmP9d.png
(一般手機)

https://ithelp.ithome.com.tw/upload/images/20210902/20140260tEJinFYdjh.png
(電子紙螢幕)

好在 browser 中的圖案都是使用 vector 的型式,而非早期的 png 靜態圖檔。這讓我在修正上容易了許多。但是,這一次的作法比較偷懶,單純只是把想要換掉的顏色改為全黑或全白,沒有考慮到 Theme 的問題。這在後續支援 Dark Mode 時,讓我折騰了好久。雖然這只是一個小 APP,但其實還用了不少的圖案,改起來也費了相當的工夫。下面就舉幾個簡單的例子:

https://ithelp.ithome.com.tw/upload/images/20210902/20140260Jm3dSWACAD.png

https://ithelp.ithome.com.tw/upload/images/20210902/20140260LxbDxINSSD.png

https://ithelp.ithome.com.tw/upload/images/20210902/20140260pGPmJUSjjb.png

改完之後再來電子紙上看一下,是不是就好看多了呢?

https://ithelp.ithome.com.tw/upload/images/20210902/201402600RbsCHUBDk.png

參考原始碼版本

圖案和文字只是 UI 的其中一環而已,但是改完之後,馬上能感受到其中的差別。在 Day 7 會介紹更多 UI 的調整,讓大部分的畫面可以看起來更加賞心悅目。下一回 Day 6,我們先來看看怎麼在下方工具列上新增翻頁的按鈕吧,畢竟,一直用手勢來翻頁也是蠻累人的。


上一篇
電子書閱讀器上的瀏覽器 [Day04] 以翻頁的方式瀏覽網頁
下一篇
電子書閱讀器上的瀏覽器 [Day06] 增加翻頁按鈕和分頁數字資訊在工具列
系列文
如何開發適合電子書閱讀器使用的瀏覽器 Android APP30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言